必看!VSCode字体美化教程 您所在的位置:网站首页 Vscode 使用idea主题 必看!VSCode字体美化教程

必看!VSCode字体美化教程

2023-12-16 04:05| 来源: 网络整理| 查看: 265

必看!VSCode美化教程😍

今天是2023年10月24号程序员节,在此祝各位程序员小哥哥小姐姐节日快乐!

前言

VSCode是一款轻量级开源编辑器,在Windows版本中默认的UI其显示效果肯定是没有在Mac中好的,其中一个重要的原因就是Mac所使用的中文字体 苹方 和英文字体 SF Pro 以及Mac独特的渲染机制,使得界面看起来更加舒适美观,所以本期教程教授大家如何更换VSCode的界面字体,以达到在Win平台下所能达到最佳的视觉体验。

觉得教程对小伙伴有帮助的记得动动小手点个赞或者收藏哦!

效果图

首先先直接上效果图。

默认界面

在这里插入图片描述

在这里插入图片描述

美化后的界面

在这里插入图片描述

在这里插入图片描述

好了,接下来赶紧进入教程吧~

步骤一 准备字体

默认界面的中文字体是微软雅黑,英文是Segoe UI,所以我们对应的也要寻找美观大方的黑体字,这里我推荐英文字体使用Inter字体,中文字体使用鸿蒙字体

Inter字体

官网链接:https://rsms.me/inter 之所以选择Inter字体是因为其视觉效果与Mac的SF Pro字体有着相似的显示效果和宽度,在魅族手机中也使用了此款字体,因为这款字体更加适合用于UI界面,著名的原型设计软件Figma也使用此款字体,还有Jerbrains最新全家桶,例如IDEA、Webstorm等也是用Inter作为默认的UI字体,等等…

在这里插入图片描述 排版效果 在这里插入图片描述 SF Pro字体: Apple官网现在用的就是这款英文字体

在这里插入图片描述

鸿蒙字体

由华为开源的一款不错的中文字体,其他厂商开源的(例如小米的MiSans、OPPO的OPPO Sans、阿里巴巴的普惠体)也可以自行选择

在这里插入图片描述

JetBrains Mono

比起默认的Consolas字体,我更推荐使用JetBrains Mono字体,由IDEA的开发公司JetBrains所设计和开源

在这里插入图片描述

支持连字特性,更加利于阅读

在这里插入图片描述

下载地址

Inter: 由于Inter是开源字体,所以可以到GitHub下载,或者从网上搜索下载 下载地址: https://github.com/rsms/inter/releases/

Harmony OS Sans 由于鸿蒙字体是开源字体,所以可以到官网直接下载、从网上搜索下载 下载地址: https://developer.harmonyos.com/cn/design/resource/

JetBrains Mono 由于JetBrains Mono是开源字体,所以可以到官网直接下载或者到github下载,也可以在网上搜索下载 下载地址: https://www.jetbrains.com/zh-cn/lp/mono/

下载完成后 右键→为所有用户安装 即可

步骤二 更换字体 打开vscode css文件

打开VsCode安装目录,按照下图或者类似路径定位到 workbench.desktop.main.css

C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述 然后用vscode打开

修改css代码

Ctrl + F定位到这段代码

.windows:lang(zh-Hans){font-family:Segoe WPC,Segoe UI,Microsoft YaHei,sans-serif}

然后替换为

.windows:lang(zh-Hans){font-family:Inter,Harmony OS Sans,Segoe WPC,Segoe UI,Microsoft YaHei,sans-serif}

Ctrl + S 保存,提示权限不足,点击“以管理员身份重试”

在这里插入图片描述

重启VS Code

然后关闭VSCode重新打开,右下角会显示vs code似乎已损坏,不予理睬即可

在这里插入图片描述

设置代码字体

接下来设置一下代码字体,由于VSCode默认没有设置中文字体,所以默认中文字体显示宋体,英文字体默认设置为Consolas

在这里插入图片描述

接下来我们打开设置

在这里插入图片描述

可以看到默认的字体设置是

Consolas, 'Courier New', monospace

在这里插入图片描述 我们将其改为:

JetBrains Mono, Harmony OS Sans, Consolas, 'Courier New', monospace

在这里插入图片描述 这样就大功告成了!!!

结语

文章到这里就结束了,不知道各位小伙伴学会了吗,有任何疑问请到评论区留言,觉得文章写的还不错的小伙伴记得动动小手点个赞和收藏哟~赶紧把你们的学费交一下!



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有